pub mod event_t {
    use web_sys::HtmlElement;
    use yew::{
        events::Event,
        html,
        Component, Context, Html, NodeRef
    };
    // gloo_utils abstraction for  web_sys, wasm_bindgen
    use gloo_events::EventListener;

    // custom listener by gloo
    pub struct GlooEventComp {
        // ref to the html element
        my_div: NodeRef,
        
        custard_listener: Option<EventListener>,
    }
    pub enum Msg {
        // set defined message
        Custard
    }
    impl Component for GlooEventComp {
        type Message = Msg;

        type Properties = ();

        fn create(_ctx: &Context<Self>) -> Self {
            Self { 
                my_div: NodeRef::default(),
                custard_listener: None 
            }
        }

        fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
            match msg {
                Msg::Custard => {
                    weblog::console_log!("Wow");
                    true
                }
            }
        }
        // after first render and before html refresh
        fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
            if !first_render {
                return;
            }
            if let Some(element) = self.my_div.cast::<HtmlElement>() {
                // callback event
                let oncustard = ctx.link().callback(|_: Event| Msg::Custard);

                let listener = EventListener::new(
                    &element,
                    "custard", 
                    move |e| oncustard.emit(e.clone())
                );

                self.custard_listener = Some(listener);
            }
        }

        fn view(&self, _ctx: &Context<Self>) -> Html {
            html!{
                <div ref={self.my_div.clone()} id="gloo div"></div>
            }
        }
    }
}